<template>
  <div class="process-designer">
    <div ref="canvas" class="canvas" />
    <div ref="propertiesPanel" class="properties-panel" />
  </div>
</template>

<script>
  import BpmnModeler from 'bpmn-js/lib/Modeler'
  import propertiesPanelModule from 'bpmn-js-properties-panel'
  import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
  import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'

  export default {
    name: 'ProcessDesigner',
    data() {
      return {
        bpmnModeler: null,
        xmlData: ''
      }
    },
    mounted() {
      this.initBpmnModeler()
    },
    methods: {
      initBpmnModeler() {
        this.bpmnModeler = new BpmnModeler({
          container: this.$refs.canvas,
          propertiesPanel: {
            parent: this.$refs.propertiesPanel
          },
          additionalModules: [propertiesPanelModule, propertiesProviderModule],
          moddleExtensions: {
            camunda: camundaModdleDescriptor
          }
        })

        // 创建新的流程图或加载已有的
        this.createNewDiagram()

        // 添加事件监听器
        this.bpmnModeler.on('element.changed', () => {
          this.saveXml()
        })
      },

      createNewDiagram() {
        const diagramXML =
          '<?xml version="1.0" encoding="UTF-8"?>' +
          '<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
          'xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" ' +
          'xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" ' +
          'id="Definitions_1" ' +
          'targetNamespace="http://bpmn.io/schema/bpmn">' +
          '<bpmn:process id="Process_1" isExecutable="true">' +
          '<bpmn:startEvent id="StartEvent_1"/>' +
          '</bpmn:process>' +
          '<bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
          '<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
          '<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
          '<dc:Bounds x="173" y="102" width="36" height="36"/>' +
          '</bpmndi:BPMNShape>' +
          '</bpmndi:BPMNPlane>' +
          '</bpmndi:BPMNDiagram>' +
          '</bpmn:definitions>'

        this.bpmnModeler.importXML(diagramXML, err => {
          if (err) {
            console.error('Error importing BPMN diagram', err)
          } else {
            const canvas = this.bpmnModeler.get('canvas')
            canvas.zoom('fit-viewport')
          }
        })
      },

      saveXml() {
        this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
          if (err) {
            console.error('Error saving BPMN diagram', err)
          } else {
            this.xmlData = xml
            console.log('Current XML', xml)
          }
        })
      },

      exportDiagram() {
        this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
          if (err) {
            console.error('Error saving BPMN diagram', err)
          } else {
            const blob = new Blob([xml], { type: 'application/xml' })
            const link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = 'process.bpmn'
            link.click()
          }
        })
      },

      deployProcess() {
        // 假设有一个API端点用于部署流程
        this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
          if (err) {
            console.error('Error saving BPMN diagram', err)
          } else {
            // 发送XML到Activiti服务器
            this.$axios
              .post('/api/workflow/deploy', {
                name: 'ProcessName',
                xml: xml
              })
              .then(response => {
                console.log('Process deployed successfully', response)
              })
              .catch(error => {
                console.error('Error deploying process', error)
              })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .process-designer {
    display: flex;
    height: 800px;
  }
  .canvas {
    width: 70%;
    height: 100%;
    border: 1px solid #ccc;
  }
  .properties-panel {
    width: 30%;
    height: 100%;
    border: 1px solid #ccc;
    overflow: auto;
  }
</style>
